<template>
  <div>
        <!-- 顶部状态栏 -->
        <div class="detail_top_status_div" :class="serverData.statusClass">
          <img :src="'./static/img/'+serverData.statusImg"/>
          <span class="status_label">{{serverData.statusText}}</span>
        </div>
        <!-- end 顶部状态栏 -->
         <!-- 中间的div -->
        <div class="center_div">
          <flexbox class="detail_label_and_button">
              <flexbox-item><h3 class="title">考核学生</h3></flexbox-item>
          </flexbox>

        <div  class="box_border_dashed user_box">
          <flexbox :gutter="0" align="flex-start" class="kaidan_box_top">
            <flexbox-item :span="3/11" class="user_img"  align="center">
                 <x-img :src="checkOrder.studentHeadImg" :default-src="'./static/img/avatar_default.png'" ></x-img>
            </flexbox-item>
            <flexbox-item  class="stu_msg">
              <div class="user_name">{{checkOrder.studentName}}</div>
              <div class="user_class"><span>{{checkOrder.departmentName}}</span><span>{{checkOrder.majorName}} {{checkOrder.schoolYearName}}</span></div>
              <div class="user_address"><span>{{checkOrder.studentNo}}</span><span>{{checkOrder.showAddress}}</span></div>
            </flexbox-item>
          </flexbox>
        </div>
        <flexbox class="detail_label_and_button div_magin10">
              <flexbox-item><h3 class="title">考核项目</h3></flexbox-item>
        </flexbox>

        <div class="box_border_dashed project_box div_magin10" >
             <flexbox :gutter="0" class="kd_info_list" v-if="checkOrder.scoringType">
                <flexbox-item :span="1/5" >
                     <span class="border_radus span_full" :class="[checkOrder.scoringType==1 ? 'color_green' : 'color_red']">
                     {{ checkOrder.scoringType==1 ? '+'+checkOrder.points : '-'  +checkOrder.points }}分</span>
                </flexbox-item>
                <flexbox-item align="left">
                  {{checkOrder.checkBigCateName}}-{{checkOrder.checkItemName}}
                      <span
                class="zuoqinag_span"
              >{{checkOrder.appropriateExplain}}</span>
                </flexbox-item>
            </flexbox>
             <div class="upload_img_list div_magin10">
            <flexbox :gutter="0">
                <flexbox-item :span="1/4"  v-for="(img , index) in serverData.imgList" :key="index">
                    <div class="upload_box upload_img ">
                        <img :src="img.src" @click="showBigImg(index)"/>
                    </div>
                </flexbox-item>
                </flexbox>
            </div>
        </div>

        <flexbox class="detail_label_and_button div_magin10">
            <flexbox-item><h3 class="title">其他信息</h3></flexbox-item>
        </flexbox>

        <div class="box_border_dashed kd_info_box div_magin10">
            <flexbox :gutter="0" class="kd_info_list">
            <flexbox-item :span="4/5" >
                <span class="info_title">考核单号：</span><span>{{checkOrder.no}}</span>
            </flexbox-item>
            <flexbox-item align="right">
                <input type="text"  id="biao1" class="copy_input" readonly="readonly" v-model="checkOrder.no">
                <span @click="doCopySelect('biao1')" class="label_copy">复制</span></flexbox-item>
            </flexbox>
            <div class="kd_info_list" v-if="checkOrder.checkState!=1"><span class="info_title">{{serverData.statusText}}时间：</span><span>{{checkOrder.stateTimeStr}}</span></div>
            <div class="kd_info_list" v-if="checkOrder.checkState!=1"><span class="info_title">{{serverData.statusText}}原因：</span><span>{{checkOrder.recallReason}}</span></div>
            <div class="kd_info_list" v-if="checkOrder.checkState==2"><span class="info_title">{{serverData.statusText}}教师：</span><span>
                   {{ checkOrder.cancelName ? checkOrder.cancelName :checkOrder.openOrderName }}</span><span @click="jSCallPhone($event)"  class="info_phone">{{checkOrder.cancelCellphone}}</span></div>
            <div class="kd_info_list"><span class="info_title">考核时间：</span><span>{{checkOrder.creTimeStr}}</span></div>
            <div class="kd_info_list"><span class="info_title">考核教师：</span><span>{{checkOrder.openOrderName}}</span><span @click="jSCallPhone($event)" class="info_phone">{{checkOrder.openOrderCellphone}}</span></div>
                <flexbox :gutter="0" class="kd_info_list">
            <flexbox-item :span="4/5" >
                <span class="info_title">开单编号：</span><span>{{checkOrder.openOrderNo}}</span>
            </flexbox-item>
            <flexbox-item align="right">
                <input type="text" id="biao2" class="copy_input" readonly="readonly" v-model="checkOrder.openOrderNo">
                <span @click="doCopySelect('biao2')" class="label_copy">复制</span></flexbox-item>
            </flexbox>
        </div>
        </div>
        <!-- end 中间的div -->

         <!-- 底部的按钮 -->
        <div class="buttom_div" v-if="viewType!='student' && checkOrder.checkState==1">
              <x-button v-if="checkOrder.canBack && loginUserId == checkOrder.openOrderUserId" type="warn" @click.native="doDataBack('cehui')" class="dskt_btn">撤回</x-button>
              <x-button v-if="!checkOrder.canBack" type="warn" @click.native="doDataBack('cexiao')" class="dskt_btn">撤消</x-button>
        </div>

         <!-- 底部的按钮 -->
        <div class="buttom_div" v-if="viewType=='student' && checkOrder.checkState==1">
              <x-button v-if="loginUserId==checkOrder.studentUserId" type="warn" @click.native="doApply()" class="dskt_btn">申诉</x-button>
        </div>

        <div>
            <previewer :list="serverData.imgList" ref="previewer" ></previewer>
        </div>
        <selectReason @okEvent="selectReasonOkEvent" ref="selectReason"></selectReason>
        <!-- end 底部的按钮 -->
  </div>
</template>

<script>
import orderService from '../../shared/service/orderService'
import appealApplyService from '../../shared/service/appealApplyService'
import selectReason  from '../../components/selectReason.vue'
import weixinService from "../../shared/service/weixinService";
const wx = require('weixin-js-sdk')
import { XImg ,Previewer,dateFormat } from 'vux'
export default {
  components: {
    XImg,
    Previewer ,
    dateFormat,
    selectReason,
  },
  data () {
    var data = {
      viewType : this.$route.query.viewType,
      id : this.$route.query.id,
      loginUserId:this.$cookie.getUserId(),
    }
    data.view = {
    }
    data.serverData = {
        status:"sx",
        statusText:"生效",
        statusClass:"color_green", //color_grey  color_red  color_green
        statusImg:"icon-InForce.png",  
        imgList:[]
    }
    data.checkOrder={};
    return data;
  },  
  mounted(){
    this.doGetData(this.id);
     weixinService.initWx(wx);
  },
  methods: {
      doGetData(id){
           this.$vux.loading.show();
            orderService.getCheckOrder(id,{hasImg:"hasImg"}).then((res)=>{
                var data = res.data;
                switch(data.checkState){
                    case 0:
                        this.serverData.statusText= "撤回";
                        this.serverData.statusClass= "color_red"; //color_grey  color_red  color_green
                        this.serverData.statusImg= "icon-recall.png";
                        break;
                    case 1:
                        this.serverData.statusText= "生效";
                        this.serverData.statusClass= "color_green"; //color_grey  color_red  color_green
                        this.serverData.statusImg= "icon-InForce.png";
                        break;
                    case 2:
                        this.serverData.statusText= "撤消";
                        this.serverData.statusClass= "color_grey"; //color_grey  color_red  color_green
                        this.serverData.statusImg= "icon_no.png";
                        break;
                }
                data.creTimeStr = dateFormat(this.$commonUtil.getDate(data.creTime), 'YYYY-MM-DD HH:mm');
                data.stateTimeStr = dateFormat(this.$commonUtil.getDate(data.stateTime), 'YYYY-MM-DD HH:mm');
                var imgList=[];
                for (let i = 0;data.checkImgList && i < data.checkImgList.length; i++) {
                    const element = data.checkImgList[i];
                    imgList.push(  {src: element.link,h: 500 });
                }
                data.showAddress = this.$commonUtil.getUserAddress(data);
                this.checkOrder=data;
                this.serverData.imgList = imgList;
                this.$vux.loading.hide();
            });
    },
    doDataBack(type){
        if(type=='cehui'){
            this.$refs.selectReason.showCehui( this.checkOrder.id);
        }else if(type=='cexiao'){
            this.$refs.selectReason.showCexiao( this.checkOrder.id);
        }
    },
    selectReasonOkEvent(id,text,type){
        var recallType = 1
        if(type=='cehui'){
            recallType=2;
        }else if(type=='cexiao'){
            recallType=1;
        }
        orderService.doBackCheckOrder(id,text,recallType,2).then((res)=>{
            if(type=='cehui'){
                this.$vux.toast.text("已撤回");
            }else{
                this.$vux.toast.text("已撤消");
            }
            this.doGetData(this.id);
        });

    },
    showBigImg(index){
        this.$refs.previewer.show(index);
    },
    //复制编号
    doCopySelect(domId){
      var Url2=document.getElementById(domId);
      Url2.select(); // 选择对象
      Url2.setSelectionRange(0, Url2.value.length), document.execCommand('Copy');
      this.$vux.toast.text("已复制到剪贴板");
      return;
    },
    doApply(){
        const _this = this;
        if(this.checkOrder.canBack){
            this.$vux.confirm.show({
                title: '提示',
                content: '请先联系扣分教师沟通处理，或在24小时后发起申诉',
                confirmText:'联系教师',
                onCancel () {
                },
                onConfirm () {
                    _this.jSCallPhone(null,_this.checkOrder.openOrderCellphone);
                }
            });
        }else{

            appealApplyService.getApplyListByCheck( this.checkOrder.id ).then((res)=>{
                if(res.data.length>0){
                    var apply = res.data[0];
                     this.$vux.alert.show({
                        title: '提示',
                        content: "已发起过申诉,请到申诉单查看详情"
                    });
                    return;
                } 
                this.$router.push({ name: "apply_edit" , query: { orderId: this.checkOrder.id } });           
            });
        }
    }
  },

}
</script>
<style scoped>
    @import '../../assets/scss/order-detail.scss';
</style>
<style scoped>
  .center_div{
      padding: 8px 8px;
  }
  .user_box{
      padding:15px 15px;
  }
  .project_box{
      padding:15px 15px;
  }
  .project_box .right_li{
      padding-bottom:5px;
  }
  .buttom_div{
    padding: 15px 20%;
    margin-top:15px;
  }
  
</style>
